<script setup lang="ts">
const props = defineProps<{
  projectNames: string[]
  status: string
  time: string
  doctor?: string
  price?: string
  nextAppointmentTime?: string
}>()

defineEmits(['call', 'cancel', 'tapFollowUpRecord'])

const statusString = computed(() => {
  if (props.status === '1')
    return '未到店'
  else if (props.status === '2')
    return '已到店'
  else if (props.status === '3')
    return '已取消'
})

const statusTagColor = computed(() => {
  if (props.status === '1')
    return '#4999F7'
  else if (props.status === '2')
    return '#4BD032'
  else if (props.status === '3')
    return '#BDBDBD'
})
</script>

<template>
  <view class="mb-24rpx rounded-20rpx bg-white">
    <view class="flex items-baseline justify-between p-24rpx">
      <view class="flex items-baseline">
        <view class="text-28rpx text-#333333 leading-40rpx">
          预约项目：
        </view>
        <view class="text-32rpx text-#333333 font-semibold leading-45rpx">
          {{ projectNames.join('，') }}
        </view>
      </view>
      <view class="text-28rpx font-semibold leading-40rpx" :style="{ color: statusTagColor }">
        {{ statusString }}
      </view>
    </view>
    <Divider width="654" color="#E6E6E6" />
    <view class="p-24rpx">
      <view class="flex items-center">
        <view class="text-28rpx text-#333333 leading-40rpx">
          预约时间：
        </view>
        <view class="text-28rpx text-#848484 leading-40rpx">
          {{ time }}
        </view>
      </view>
      <block v-if="status === '2'">
        <Spacer height="16" />
        <view class="flex items-center">
          <view class="text-28rpx text-#333333 leading-40rpx">
            服务医生：
          </view>
          <view class="text-28rpx text-#848484 leading-40rpx">
            {{ doctor || '未知' }}
          </view>
        </view>
        <Spacer height="16" />
        <view class="flex items-center">
          <view class="text-28rpx text-#333333 leading-40rpx">
            服务消费金额：
          </view>
          <view class="text-28rpx text-#4999F7 leading-40rpx">
            {{ `¥${price || 0}` }}
          </view>
        </view>
        <Spacer height="16" />
        <view class="flex items-center">
          <view class="text-28rpx text-#333333 leading-40rpx">
            下次复诊时间：
          </view>
          <view class="text-28rpx text-#848484 leading-40rpx">
            {{ nextAppointmentTime || '未知' }}
          </view>
        </view>
      </block>
    </view>
    <block v-if="status === '1' || status === '2'">
      <Divider width="654" color="#E6E6E6" />
      <view class="flex flex-row-reverse p-24rpx">
        <view v-if="status === '1'" class="flex items-center">
          <button class="rounded-10rpx bg-#F4F4F4 px-20rpx py-12rpx text-28rpx text-#848484 leading-40rpx" @tap.stop="$emit('cancel')">
            取消预约
          </button>
          <Spacer width="12" />
          <button class="rounded-10rpx bg-#4999F7 px-20rpx py-12rpx text-28rpx text-white leading-40rpx" @tap.stop="$emit('call')">
            联系客服
          </button>
        </view>
        <view v-if="status === '2'" class="flex items-center">
          <button class="rounded-10rpx bg-#4999F7 bg-opacity-20 px-20rpx py-12rpx text-28rpx text-#4999F7 leading-40rpx" @tap.stop="$emit('tapFollowUpRecord')">
            复诊记录
          </button>
          <Spacer width="12" />
          <button class="rounded-10rpx bg-#4999F7 px-20rpx py-12rpx text-28rpx text-white leading-40rpx" @tap.stop="$emit('call')">
            联系客服
          </button>
        </view>
      </view>
    </block>
  </view>
</template>
